<template>
  <!-- 登录页面 -->
  <div class="main-container" ref="mainContainer">
    <dv-full-screen-container>
      <div class="mycard">
        <div class="my-login-form">
          <div class="login-container">
            <h3>银发护航智能康养系统</h3>
            <div class="myText">
              Silver Escort Intelligent Health Care System
            </div>
            <div class="login-form-com">
              <div class="login">
                <login-com></login-com>
              </div>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import bgImage from "@/assets/loginBg.png";
export default {
  name: "LoginPage",
  components: {
    LoginCom: () => import("@/components/login/loginCom"),
  },
  methods: {
    loadingBg() {
      const bg = new Image();
      bg.src = bgImage;
      bg.onload = () => {
        this.$refs.mainContainer.style.backgroundImage = `url(${bgImage})`;
        this.$refs.mainContainer.style.backgroundRepeat = "no-repeat";
        this.$refs.mainContainer.style.backgroundSize = "100% 100%";
      };
    },
  },
  mounted() {
    this.loadingBg();
  },
};
</script>

<style scoped lang="scss">
.main-container {
  height: 100vh;
  width: 100%;
}
#dv-full-screen-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.mycard {
  width: 68%;
  height: 60%;
  display: flex;
  justify-content: center;
  .my-login-form {
    border-radius: 10px;
    width: 50%;
    height: 80%;
    padding: 2rem;
    padding-top: 4rem;
    background-color: #eff5ff;
    h3 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
      font-weight: 800;
      text-align: center;
      color: #5c5da7;
    }

    .myText {
      text-align: center;
      margin-bottom: 1rem;
      color: #5c5da7;
    }
  }
}
</style>
